<template>
    <view class="container">
        <view class="chat-box">
            <text class="label">🤖 剧 情：</text>
            <text v-if="loading">剧情生成中...</text>
            <zero-markdown-view :markdown="newestMsg" v-else-if="newestMsg"></zero-markdown-view>
            <text v-else class="placeholder">请提问</text>
        </view>

        <view class="input-box">
            <input
                    v-model="answer"
                    placeholder="请输入"
                    class="input"
                    confirm-type="done"
            />
            <button @click="send" :disabled="loading || !answer.trim()">发送</button>
        </view>
    </view>
</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue'
import {loadTxtFile} from "@/api/local";
import type {Message} from "@/api/deepseek";
import {callDeepSeek} from "@/api/deepseek";
import ZeroMarkdownView from "@/uni_modules/zero-markdown-view/components/zero-markdown-view/zero-markdown-view.vue";

const title = ref('Hello')
const newestMsg = ref()
const messages = ref([] as Array<Message>);
const answer = ref("")
const loading = ref(false);
const init = () => {
    loadTxtFile().then(res => {
            messages.value.push({
                content: res,
                role: "system"
            })
            loading.value = true;
            callDeepSeek(messages.value).then(res1 => {
                newestMsg.value = res1;
                messages.value.push({
                    content:res1,
                    role:"assistant"
                })
                loading.value = false;
            })
        }
    );

}

const send = () => {
    messages.value.push({
        content:answer.value,
        role:"user"
    })
    loading.value = true;
    callDeepSeek(messages.value).then(res1 => {
    newestMsg.value = res1;
    messages.value.push({
        content:res1,
        role:"assistant"
    })
    loading.value = false;
    answer.value=""
})
}

onMounted(()=>{
    init();
})
</script>

<style scoped>
.container {
    padding: 20rpx;
}

.chat-box {
    flex: 1;
    padding: 20rpx;
    overflow: hidden;
    background-color: #f5f5f5;
    border-radius: 10rpx;
    margin-bottom: 30rpx;
    min-height: 200rpx;
}

.label {
    font-weight: bold;
    display: block;
    margin-bottom: 10rpx;
}

.placeholder {
    color: #aaa;
}

.input-box {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    background: #fff;
    padding: 10rpx 20rpx;
    border-top: 1px solid #eee;
    box-sizing: border-box;
    align-items: center;
    z-index: 99;
}

.input {
    flex: 1;
    border: 1px solid #ccc;
    padding: 10rpx;
    border-radius: 8rpx;
}
</style>